.page {
  // background: #f6f6f6;
}

.card-card {
  background: #19a47d80;
  border-radius: 40rpx;
  padding-bottom: 28rpx;
  margin-bottom: 32rpx;
}

.card {
  margin-top: 10rpx;
  background: #00a074;
  border-radius: 40rpx;
  padding: 26rpx 40rpx 56rpx 40rpx;
  color: #fff;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title-box {
    display: flex;
    align-items: center;

    .trip-title {
      font-size: 32rpx;
    }

    .more-icon {
      width: 62rpx;
      height: 48rpx;
      margin-right: 20rpx;
      margin-bottom: -6rpx;
    }
  }

  .dian-list {
    display: flex;
    align-items: center;
    padding: 30rpx;
    .dian {
      background-color: #fff;
      border-radius: 50%;
      margin-right: 6rpx;
      width: 14rpx;
      height: 14rpx;
    }
  }
}

.card-content {
  margin-top: 28rpx;
}

.total-label {
  font-size: 32rpx;

}

.total-price {
  font-size: 48rpx;
  // font-weight: bold;
  margin-left: 22rpx;
}

.card-footer {
  margin-top: 46rpx;

  .day-num {
    font-size: 24rpx;
    color: #ffffffcc;
  }

  .date {
    color: #fff;
    font-size: 34rpx;
  }
}

.tab-bar {
  display: flex;
  background: #F9F9F9;
  border-radius: 128rpx;
  overflow: hidden;
  margin-bottom: 48rpx;

  .tab-item {
   
    flex: 1;
    text-align: center;
    padding: 22rpx 0;
    font-size: 32rpx;
    color: #A2A2A2;
    border-radius: 128rpx;
  }

  .tab-item.active {
    background: #CFEDE5;
    color: #000;
  }
}

.content {
  padding-bottom: 22rpx;
}

/* 支出 */
.expense-item {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 30rpx;
  padding: 40rpx 36rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 4px 18px 0 #191c320a;
}

.avatar {
  width: 88rpx;
  height: 88rpx;
  border-radius: 30rpx;
}

.info {
  flex: 1;
  margin-left: 32rpx;
}

.name {
  font-size: 30rpx;
  // font-weight: bold;
  margin-bottom: 6rpx;
  display: flex;
  align-items: center;
}
.item-beizhu{
  width: 300rpx;
  display: inline-block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.i {
  font-size: 24rpx;
  background-color: #F9F9F9;
  border-radius: 10rpx;
  color: #707070;
  margin-left: 18rpx;
  padding: 2rpx 8rpx;
}

.date {
  font-size: 28rpx;
  color: #a2a2a2;
}

.amount {
  font-size: 30rpx;
  font-weight: bold;
}

/* 結清 */
.settle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
  box-shadow: 0 4px 18px 0 #191c320a;

  .left {
    flex: 1;

    background: #fff;
    border-radius: 30rpx;
    margin-right: 4rpx;
    padding: 24rpx 32rpx 32rpx;

    .left-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 30rpx;

      .me-box {
        display: flex;
        align-items: center;

        .me {
          padding: 2rpx 8rpx;
          background-color: #F9F9F9;
          color: #707070;
          border-radius: 10rpx;
          margin-left: 12rpx;
          margin-bottom: -2rpx;
        }
      }
    }

    .bill-right {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: -18rpx;
    }

    .middle {
      font-size: 30rpx;
      background-color: #F9F9F9;
      text-align: center;
      border-radius: 10rpx;
      margin-top: 20rpx;
      padding: 10rpx;
    }
  }

  .status {
    border-radius: 24rpx;
    width: 140rpx;
    height: 176rpx;
  }

}






.add-btn {
  position: fixed;
  bottom: 80rpx;
  right: 32rpx;
  width: 180rpx;
  height: 116rpx;
}


/* 遮罩 */
.mask {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 100;
}

/* 弹框 */
.filter-popup {
  position: fixed;
  bottom: 428rpx;
  left: 50%;
  width: 606rpx;
  height: 492rpx;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 56rpx;
  padding: 48rpx 56rpx;
  z-index: 101;
}

.filter-title {
  background-color: #1AA37D;
  color: #fff;
  height: 98rpx;
  width: 320rpx;
  border-radius: 96rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  position: absolute;
  top: -126rpx;
  left: 50%;
  transform: translateX(-50%);
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rpx;
}

.filter-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.filter-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 30rpx;
  margin-bottom: 14rpx;
}

.close-btn {
  width: 140rpx;
  height: 140rpx;
  background: #1AA37D;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 140rpx;
  font-size: 64rpx;
  position: absolute;
  bottom: -240rpx;
  left: 50%;
  transform: translateX(-50%);
}

/* 打开动画 */
.keyboard-popup.keyboardShow {
  bottom: 0;
  animation: slideUp 0.3s ease;
}
.keyboard-popup.keyboardHide {
  bottom: -1432rpx;
  animation: slideDown 0.3s ease;
}
.keyboard-popup {
  position: fixed;
  bottom: -1432rpx;
  left: 0;
  background: #fff;
  border-radius: 64rpx; 
  width: 100%;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  padding: 84rpx 32rpx 86rpx;
  height: 1432rpx;
  /* 动画关键 */
  animation: slideUp 0.3s ease;
  
  .keyboard-heard {
    padding: 0 16rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30rpx;

    .heard-title {
      font-size: 52rpx;
      font-weight: 600;
    }

    .heard-right {
      .heard-del {
        color: #EB5353;
        font-size: 40rpx;
      }

      .heard-ok {
        font-size: 40rpx;
        padding: 20rpx;
        margin-right: -20rpx;
      }
    }
  }

  .tab-list {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .tab-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1;
      border-radius: 90rpx;
      background-color: #CFEDE5;
      padding: 26rpx;
      text-align: center;
      height: 96rpx;
      .tab-img {
        width: 48rpx;
        height: 48rpx;
        margin-bottom: -4rpx;
      }

      .tab-right {
        display: flex;
        align-items: center;

        .tab-value {
          color: #000;
          font-size: 32rpx;
        }

        .toBottom-img {
          // margin-left: 12rpx;
          width: 48rpx;
          height: 48rpx;
          margin-bottom: -4rpx;
        }
      }
    }
    .food{
      background-color: #F8EDD9;
    }
    .play{
      background-color: #DFF4E2;
    }
    .shop{
      background-color: #F9EFF7;
    }
    .hotel{
      background-color: #E5EAF3;
    }
    .traffic{
      background-color: #E5F2F3;
    }
    .other{
      background-color: #D9F1FF;
    }
    .tab-item2 {
      margin-left: 14rpx;
      
    }
  }

  .expend {
    margin: 32rpx 0;
    text-align: center;
    color: #707070;
  }

  .fake-input {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    margin-bottom: 40rpx;

    min-height:128rpx;
    .unit {
      font-size: 72rpx;
      color: #707070;
    }

    .amount-text {
      margin-left: 8rpx;
      font-size: 96rpx;
      // font-weight: bold;
    }
  }

  .info-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16rpx;

    .input-item {
      width: 50%;
      padding: 18rpx 30rpx;
      border: 2rpx solid #D9D9D9;
      border-radius: 96rpx;
      margin-right: 12rpx;

      .my-placeholder {
        font-size: 32rpx;
        color: #A2A2A2;
      }
    }

    .info-item {
      width: 50%;
      padding: 18rpx 16rpx;
      border: 2rpx solid #D9D9D9;
      border-radius: 96rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .add-name{
        width: 100%;
        /* 限制两行显示省略号 */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
      .placeholder {
        font-size: 32rpx;
        color: #A2A2A2;
      }

      .toRight-img {
        width: 48rpx;
        height: 48rpx;
      }
    }
  }

  .cursor {
    width: 2rpx;
    height: 120rpx;
    background: #000;
    margin-left: 4rpx;
    animation: blink 1s step-start infinite;
  }

  @keyframes blink {
    50% {
      opacity: 0;
    }
  }

  .keyboard {
    display: flex;
    align-items: center;
    margin-top: 48rpx;
    .key-box {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 4rpx;

      .key {
        height: 160rpx;
        width: 168rpx;
        border-radius: 60rpx;
        font-size: 72rpx;
        background: #F3F3F3; 
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .right-box {
      display: flex;
      flex-direction: column;
      width: 162rpx;
      margin-left: 8rpx;
      .btn-img{
        width: 48rpx;
        height: 48rpx;
      }
      .del{
        width: 162rpx;
        height: 324rpx;
        flex-shrink: 0;
        border-radius: 60rpx;
        background: #CFEDE5;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .ok{
        margin-top: 4rpx;
        width: 162rpx;
        height: 324rpx;
        flex-shrink: 0;
        border-radius: 60rpx;
        background: #1AA37D;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }



}

.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 弹框内容 */
  .modal-content {
    width: 620rpx;
    background: #fff;
    border-radius: 36rpx;
    padding: 44rpx;
    text-align: center;
    position: relative;
  }
  
  /* 图标 */
  .modal-icon {
    width: 260rpx;
    height: 184rpx;
    margin-top: -126rpx;
  }
  
  /* 标题 */
  .modal-title {
    // margin-top: 20rpx;
    font-size: 48rpx;
    margin-bottom: 48rpx;
  }
  
  /* 提示内容 */
  .modal-message {
    font-size: 36rpx;
    color: #A2A2A2;
    margin-bottom: 72rpx;
  }
  
  /* 按钮组 */
  .modal-buttons {
    display: flex;
    justify-content: space-between;
  }
  
  /* 单个按钮 */
  .modal-btn {
    width: 45%;
    padding: 20rpx 0;
    border-radius: 32rpx;
    text-align: center;
    font-size: 40rpx;
  }
  
  /* 取消按钮样式 */
  .cancel-btn {
    background-color: #D9D9D9;
    color: #707070;
    border-radius: 32rpx;
    font-size: 40rpx;
  }
  
  /* 确认按钮样式 */
  .confirm-btn {
    background-color: #1AA37D;
    color: white;
  }
}

.time-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: flex-end;
  padding: 0 20rpx 0rpx;
  
  .popup-container {
    width: 100%;
    background-color: #fff;
    border-radius: 64rpx;
    height: 812rpx;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .tabs {
    display: flex;
    justify-content: space-around;
    padding: 68rpx 0 0;
    border-bottom: 2rpx solid #eee;
  }
  
  .tab {
    font-size: 32rpx;
    color: #A2A2A2;
    padding: 10rpx 20rpx 32rpx;
    position: relative;
  }
  
  .active {
    width: 86rpx;
    height: 6rpx;
    flex-shrink: 0;
    border-radius: 46rpx 46rpx 0 0;
    background: #1AA37D;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-48%);
  }
  .tab-bottom{
    position: absolute;
    bottom: 80rpx;
    left: 50%;
    transform: translateX(-50%);
    .ChooseYes-img{
      width: 120rpx;
      height: 120rpx;
    }
  }
  .tab-content {
    padding: 76rpx 36rpx 66rpx; 
    .time-title{
      font-size: 52rpx;
      font-weight: 600;
      margin-bottom: 50rpx;
    }
    .days-item{
      font-size: 48rpx;
      height: 108rpx;
      background-color: #E7F5F1;
      
      border-radius: 36rpx;
      z-index: -1;
    }
    .days-item::before {
      content: '';
      position: absolute;
      top: 0rpx;
      border: none;
    }
    
    .days-item::after {
      content: '';
      position: absolute;
      bottom: 0;
      border: none;
    }

    .day-item{
      font-size: 48rpx;
      text-align: center;
      line-height: 108rpx;
      // font-weight: 600;
      // position: absolute;
      // background-color:#E7F5F1;
      // border-radius: 36rpx;
    }
    .day-item2{
      // width: 300rpx;
      // padding-left: 80rpx;
      
    }
  }
  
  .day-picker {
    display: flex;
    justify-content: center;
  }
  
  .picker-item {
    text-align: center;
    font-size: 52rpx;
    color: #333;
    height: 60rpx;
    line-height: 60rpx;
  }
  
  .placeholder {
    height: 300rpx;
  }

}  



.popup-maskk {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  
  .popup-content {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 94%;
    background: #fff;
    border-radius: 64rpx;
    padding: 76rpx 48rpx 80rpx;
    // animation: slideUp 0.3s ease-out;
  }
  
  /* 动画：从下往上 */
  @keyframes slideUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
  
  @keyframes slideDown {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(100%);
    }
  }

  .popup-title {
    font-size: 52rpx;
    font-weight: 600;
    margin-bottom: 48rpx;
  }
  
  .input-box{
    background-color: #F9F9F9;
    padding: 32rpx 48rpx;
    border-radius: 36rpx;
    margin-bottom: 32rpx;
    .popup-input {
      width: 100%;
    }
  }
  
  .popup-select {
    background-color: #F9F9F9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx 48rpx;
    border-radius: 36rpx;
    margin-bottom: 66rpx;
    .toRight-img{
      width: 48rpx;
      height: 48rpx;
      margin-bottom: -4rpx;
    }
  }
  
  
  .popup-footer {
    display: flex;
    justify-content: center;
  }
  
  .btn-cancel {
    flex: 1;
    background: #D9D9D9;
    color: #707070;
    padding: 24rpx 0;
    text-align: center;
    margin-right: 24rpx;
    border-radius: 32rpx;
    font-weight: 600;
  }
  
  .btn-confirm {
    font-weight: 600;
    flex: 1;
    background: #1AA37D;
    color: white;
    padding: 24rpx 0;
    text-align: center;
    border-radius: 32rpx;
  }
  
  .folder-list {
    display: flex;
    flex-direction: column;
  }
  
  .folder-item {
    padding: 25rpx 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
    height:112rpx ;
    .del-icon{
      color: #A2A2A2;
      font-size: 48rpx;
      padding: 20rpx 30rpx;
    }
  }
  .folder-item:hover {
    color: #07c160;
  }
}

/* 遮罩层 */
.modal-mask2 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 弹框内容 */
  .modal-content {
    width: 620rpx;
    background: #fff;
    border-radius: 36rpx;
    padding: 44rpx;
    text-align: center;
    position: relative;
  }
  
  /* 图标 */
  .modal-icon {
    width: 260rpx;
    height: 184rpx;
    margin-top: -126rpx;
  }
  
  /* 标题 */
  .modal-title {
    // margin-top: 20rpx;
    font-size: 48rpx;
    margin-bottom: 48rpx;
  }
  
  /* 提示内容 */
  .modal-message {
    font-size: 36rpx;
    color: #A2A2A2;
    margin-bottom: 72rpx;
  }
  
  /* 按钮组 */
  .modal-buttons {
    display: flex;
    justify-content: space-between;
  }
  
  /* 单个按钮 */
  .modal-btn {
    width: 45%;
    padding: 20rpx 0;
    border-radius: 32rpx;
    text-align: center;
    font-size: 40rpx;
  }
  
  /* 取消按钮样式 */
  .cancel-btn {
    background-color: #D9D9D9;
    color: #707070;
    border-radius: 32rpx;
    font-size: 40rpx;
  }
  
  /* 确认按钮样式 */
  .confirm-btn {
    background-color: #1AA37D;
    color: white;
  }
}